Exploit Airtable inside your React app

May 11, 2022

Intro

At Karbon 🌱, we iterate fast and we are always looking for ways to improve our products and services.

We had the idea of building an idea box, allowing users to create, share and vote for ideas of new features.

This is the typical project where we have to store unsensitive data entered by users. However we wanted to avoid impacting the rest of our application (e.g we don’t want to change our database schema).

Airtable is a great tool for this kind of usecase.

Let’s build this idea box ! 🗳️

Airtable provides an npm package to interact with their API. However, since I was working with multiple tables (one for votes, another one for ideas), I found myself repeating a lot of boilerplate code. I landed on a hook that seemed to provide a nice abstraction to interact with Airtable, but it had some bugs and the author didn’t seem to willing to spend time on it. So I decided to write my own hook.

On top of fixing a few issues, I worked on the following points :

provide an option to handle errors when fetching, updating or deleting data
provide an option to filter records using Airtable’s QueryParams

Usage 👩‍💻👨‍💻

Install the hook and Airtable’s package with your favorite package manager, for example npm :

npm install --save airtable use-airtable-crud

const { records, createRecord, updateRecord, deleteRecord, getRecords, loading } = useAirtable(
    'TABLE_NAME',
    AIRTABLE_API_KEY,
    'TABLE_BASE_ID',
    {
      filterByFormula: '{myField} = TRUE()',
    },
  );

You can find the source code of the hook here.

Outro

I hope this hook can be useful for you too! Prototyping and iterating is a great way to learn new things.